<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击元素的大小区域检测</title>
    <style>
[size="bigger"] {
    font-size: .875rem;
}
[size="2"] {
    height: 2em;
    padding: 0 2em;
}
[size="3"] {
    height: 3em;
    padding: 0 3em;
}
    </style>
</head>
<body>

<h3>按钮有大有小</h3>

<div id="button">
    <p>任意按钮点击移除下面文字的点击变色事件。</p>
    <button>默认尺寸</button>
    <button size="bigger">尺寸稍大</button>
    <button size="2">尺寸+2</button>
    <button size="3">尺寸+3</button>
</div>

<h3>点击自己变色</h3>

<span id="link" tabindex="0" role="button">点击我随机变色？</span>

<script src="./click-accessible.js"></script>
<script>
var fnColor = function (event) {
    event.preventDefault();

    link.style.color = '#' + String(Math.random()).slice(-6);
};
link.addEventListener('click', fnColor);

// 点击按钮
document.querySelectorAll('button').forEach(function (button) {
    button.addEventListener('click', function (event) {
        link.removeEventListener('click', fnColor);
    });
});
</script>
</body>
</html>